<template>
  <!--搜索表单 -->
  <SearchForm
    v-if="isShowQueryForm"
    ref="searchFormRef"
    class="searchTableWrap searchForm"
    :search-fields="searchFields"
    @search="search"
    @reset="reset"
  >
    <template #searchItems="{ colProps, formState }">
      <slot name="searchItems" :form-state="formState" :col-props="colProps" />
    </template>
  </SearchForm>
  <div style="height: 16px"></div>
  <!--普通表格 -->
  <SearchTable
    ref="searchTableRef"
    class="searchTableWrap searchTable"
    :search-state="searchState"
    :table-list-api="tableListApi"
    :api-method="apiMethod"
    :columns="columns"
    :scroll="scroll"
    :is-pagination="isPagination"
    :convert-from-response="convertFromResponse"
    :show-selection="showSelection"
    :row-selection-type="rowSelectionType"
    :default-page-size="defaultPageSize"
  >
    <template #tableBtns="{ selectedRowsData }">
      <slot name="tableBtns" :selected-rows-data="selectedRowsData"></slot>
    </template>
  </SearchTable>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import SearchForm from './SearchForm.vue';
import SearchTable from './SearchTable.vue';
import type { IColumn, ITableResponse } from '@/types';
import type { RowSelectionType } from 'ant-design-vue/es/table/interface';

// 传入组件的props数据
const props = defineProps({
  // 是否展示搜索表单
  isShowQueryForm: {
    type: Boolean,
    default: true,
  },
  // 表格接口api
  tableListApi: {
    type: String,
    required: true,
  },
  // 表格接口请求method
  apiMethod: {
    type: String,
    default: 'get',
  },
  defaultParams: {
    type: Object,
    default: () => ({}),
  },
  // 表格列配置项
  columns: {
    type: Array as PropType<IColumn[]>,
    default: () => [],
  },
  // 是否表格展示滚动条
  scroll: {
    type: Object,
    default() {
      return {
        x: 0,
      };
    },
  },
  // 是否分页，控制分页功能是否页面展示
  isPagination: {
    type: Boolean,
    default: true,
  },
  /**
   * 将接口返回的数据转换成这种形式
   *
   * ```json
   * { list: [], count: 0 }
   * ```
   */
  convertFromResponse: {
    type: Function as PropType<(res: ITableResponse) => any>,
    default: (res: ITableResponse) => res,
  },
  // 是否展示表格多选
  showSelection: {
    type: Boolean,
  },
  rowSelectionType: {
    type: String as PropType<RowSelectionType>,
    default: 'checkbox',
  },
  // 默认一页展示多少条数据
  defaultPageSize: {
    type: Number,
    default: 10,
  },
});

// 表单ref
const searchFormRef = ref();
const searchFields = computed(() => props.columns.filter(item => item.searchable));
const searchState = ref({ ...props.defaultParams });

// 表格ref
const searchTableRef = ref();
// 搜索-查询
const search = (params: object) => {
  searchState.value = { ...props.defaultParams, ...params };
  refreshTable();
};
// 搜索-重置
const reset = () => {
  searchState.value = { ...props.defaultParams };
  refreshTable();
};
// 刷新表格方法
const refreshTable = () => {
  const pag = {
    current: 1,
    pageSize: 10,
    total: 100,
  };
  // 确保设置的 params 已经传递到子组件
  nextTick(() => {
    searchTableRef.value?.refreshTable(pag);
  });
};

defineExpose({
  refreshTable, // 将刷新表格方法暴露出去（包括：常规表格，树表格）
});
</script>

<style lang="less" scoped>
@padding: 16px;
@marginTop: 18px;
@background: #ffffff;
@borderBadius: 6px;

.searchTableWrap {
  padding: @padding;
}

.searchForm {
  // margin-top: @marginTop;
  background: @background;
  border-radius: @borderBadius;
}

.searchTable {
  // margin-top: 16px;
  background: @background;
  border-radius: @borderBadius;
  padding: @padding;
}
</style>
